<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>店铺</title>
    <link rel="stylesheet" href="static/css/aui.2.0.css">
    <link rel="stylesheet" href="static/css/alert.css">
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/shop_detail.css">

</head>
<body>
<!--<div class="null-status"></div>-->
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode>
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">店铺</div>
</header>
<section id="detail-box">
    <script id="detail-template" type="text/x-handlebars-template">
        {{#this}}
        <div class="detail-img">
            <img src="{{mainImage}}" alt="">
        </div>
        <div class="detail-shop-info-box">
            <div class="shop-name flex-row-around">
                <span>{{name}}</span>
                <!--<img src="static/img/shop-icon-star-normal.png" class="shop-collect">-->

                {{#valueCompare attention '==' '0'}}
                <i class="shop-collect"></i>
                {{/valueCompare}}
                {{#valueCompare attention '==' '1'}}
                <i class="shop-collect shop-collect1"></i>
                {{/valueCompare}}
            </div>
            <div class="shop-price flex-row-around">
                <span>客单价￥20</span>
                <span>返红包￥{{hongbao}}</span>
            </div>
            <div class="shop-pay-share flex-row-around">
                <span class="shop-share">一键分享</span>
                <span class="shop-pay">一键支付</span>
            </div>
            <div class="shop-line flex-row-around">---------------------------------</div>
            <div class="shop-detail flex-around">店铺详情</div>
            <div class="shop-tel flex-row-around">
                <span>店铺电话</span>
                <a href="javascript:;" data-tel="{{phone}}" class="display-box" id="phone">
                    <img class="shop-phone" src="static/img/shop-icon-phone.png" alt="">
                </a>
            </div>
            <div class="shop-address-box display-flex-row">
                <span class="shop-address-detail">{{address}}</span>
            <span class="shop-location">
                <img src="static/img/location_icon.png" alt="">
                <span>{{juli}}km</span>
            </span>
            </div>
            <div class="shop-yingye display-flex-row">
                <span>营业时间</span>
                <span>{{openTime}}h</span>
            </div>
        </div>
        <section class="info-box">
            <div class="info-more">更多信息</div>
            <div class="shop-info-list-box">
                <div class="shop-info-list">
                    <img src="{{oneImage}}" alt="">
                    <p>{{oneText}}</p>
                </div>
                <div class="shop-info-list">
                    <img src="{{twoImage}}" alt="">
                    <p>{{twoText}}</p>
                </div>
            </div>
        </section>
        {{/this}}
    </script>
</section>
<!--评价-->
<section id="shop-evaluate-box">
    <div class="info-more evaluate-title">店铺评价</div>
    <div class="none-evaluate">暂无评价信息...</div>
    <ul id="evaluate-box">

    </ul>

</section>

<div class="mask"></div>
<section id="pat-method">
    <div class="pay-title">支付方式</div>
    <ul class="pay-box">
        <li class="wx-list">
            <div class="wx-list-left">
                <img src="static/img/shop-icon-pay-weixin.png" alt="">
                <span class="pay-text">微信</span>
            </div>
            <input class="aui-radio con-pay-select" checked type="radio" name="radio1" value="1">
        </li>
        <li class="wx-list">
            <div class="wx-list-left">
                <img src="static/img/shop-icon-pay-zhifubao.png" alt="">
                <span class="pay-text">支付宝</span>
            </div>
            <input class="aui-radio con-pay-select" type="radio" name="radio1" value="2">
        </li>
    </ul>
    <div id="pay-submit">确认</div>
</section>
<section id="share-method">
    <div class="share-title">分享</div>
    <div class="share-content">分享好友下载app,下载后双方均可领取红包</div>
    <ul class="share-method-box">
        <li class="wx-share share-list" data-method="1">
            <img src="static/img/shop-icon-weixin.png" alt="">
            <p>微信好友</p>
        </li>
        <li class="wx-quan-share share-list" data-method="2">
            <img src="static/img/shop-icon-pengyou.png" alt="">
            <p>朋友圈</p>
        </li>
        <li class="qq-share share-list" data-method="3">
            <img src="static/img/shop-icon-qq.png" alt="">
            <p>QQ好友</p>
        </li>
    </ul>
</section>
<section id="pay-detail">
    <div class="detail-title">支付详情</div>
    <div class="detail-list">
        <div class="detail-list-text">金额</div>
        <input class="actual-price" type="number" placeholder="请输入金额">
    </div>
    <div class="detail-list">
        <div class="detail-list-text">使用红包</div>
        <input type="number" class="hongbao-price" placeholder="请输入红包金额">
    </div>
    <div id="detail-submit">确定</div>
</section>
<script id="evaluate-box-tpl" type="text/x-handlebars-template">
    {{#each this}}
    <li class="shop-evaluate-box">
        <div class="evaluate-top">
            <span class="author">{{NICK_NAME}}</span>
            <span class="time">{{createtime}}</span>
        </div>
        <div class="evaluate-text">{{achievement}}</div>
        <div class="evaluete-img">
            {{#each listP}}
            <img src="{{this}}" alt="">
            {{/each }}
        </div>
    </li>
    {{/each}}
</script>
<script src="lib/jquery-3.0.0.min.js"></script>
<script src="lib/handlebars-v4.0.10.js"></script>
<script src="static/js/config.js"></script>
<script src="static/js/function.js"></script>
<script src="static/js/alert.js"></script>
<script src="static/js/common.js"></script>
<script src="static/js/com_helper.js"></script>
<script src="static/js/fly-zomm-img.min.js"></script>
<!--<script src="static/js/shop_detail.js"></script>-->
<script>
    /**
     * Created by Administrator on 2017/10/12.
     */

    var id = locationSearcher('id');
    var start = 1,length = 10,maxnum = 0,range = 200,flag = 0;
    var shopName = '';

    var detailTpl = $('#detail-template').html();
    var detailCmp = Handlebars.compile(detailTpl);
    var evaluateTpl = $('#evaluate-box-tpl').html();
    var evaluateCmp = Handlebars.compile(evaluateTpl);
    var loading = dialog.loading();

    $.ajax({
        url:C.interface.catDetail,
        type:'get',
        dataType:'json',
        data:{
            id:id,
            token: C.token
        },
        complete:function () {
            loading.close();
        },
        success:function (response) {
            if (response.errorCode == '200'){
                var data = response.data;

                shopName = data.name;
                var id=data.id;
                //收藏的数据
                var attention=data.attention;
                $('#detail-box').html(detailCmp(data));
                //判断店铺有没有被收藏过  >0 收藏了   =0没有收藏
                if(attention>0){
                    $('.shop-collect').addClass('shop-collect1')
                }

                //收藏商品
                $('.shop-collect').click(collect);

                //支付弹窗
                $('.shop-pay').click(payMethod);
                //分享弹窗
                $('.shop-share').click(shaMethod);

                /**
                 * 拨打电话
                 * */
                $('#phone').click(function (e) {
                    e.preventDefault();
                    var phone = $(this).data('tel');
                    console.log(phone);

                    var ua = navigator.userAgent.toLowerCase();
                    if (/iphone|ipad|ipod/.test(ua)) {
                        iosCallPhone(phone);
                    } else {
                        androidCallPhone(JSON.stringify(phone));
                    }
                });
            }
        }
    });

    getEvaluate();
    //监听滚动高度，加载数据
    $(window).on('scroll',function () {
        var scrollPos= $(window).scrollTop(); //滚动条距顶部距离
        totalheight = parseFloat($(window).height()) + parseFloat(scrollPos);
        //console.log(st);
        //console.log(tabTop);
        if (start>maxnum){
            return false;
        }
        if (($(document).height()-range)<=totalheight&&start<maxnum){
            //这里不能使用模板填充，应该是append()....
            getEvaluate();
        }

    });
    /**
     * 获取评价
     * */
    function getEvaluate() {
        if (flag){
            return false;
        }
        flag = 1;
        $.ajax({
            url:C.interface.getEvaluate,
            type:'post',
            dataType:'json',
            data:{
                storeId:id,
                start: start,
                length:length
            },
            success:function (response) {
                if (response.errorCode == '200'){
                    $('.evaluate-title').show();
                    start++;
                    var data = response.data;
                    maxnum = response.count;
                    if (maxnum == '0'){
                        $('.none-evaluate').show();
                    }
                    if (data.length > 0){
                        $('#evaluate-box').append(evaluateCmp(data));
                    }else {
                        start = maxnum +1;
                    }


                    $('.evaluete-img').FlyZommImg({
                        rollSpeed:200,//切换速度
                        miscellaneous:false,//是否显示底部辅助按钮
                        closeBtn:true,//是否打开右上角关闭按钮
                        hideClass:'hide',//不需要显示预览的 class
                        imgQuality:'thumb',//图片质量类型  thumb 缩略图 默认 original 原图
                        slitherCallback:function (direction,DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
//                   console.log(direction,DOM);
                        }
                    });

                    flag = 0;
                }
            }
        });
    }





    /**
     * 收藏
     * */
    function collect() {
        var loading = dialog.loading();
        var _this=$(this);
        $.ajax({
            url: C.interface.add,
            type: 'post',
            dataType: 'json',
            data: {
                token: C.token,
                storeId:id
            },
            complete:function () {
                loading.close();
            },
            success:function (response) {
                if (response.errorCode == '200'){
                    if(!_this.hasClass('shop-collect1') == true) {
                        _this.addClass('shop-collect1');
                        dialog.tusiSuccess('收藏成功',1000);
                    }else {
                        _this.removeClass('shop-collect1')
                        dialog.tusiSuccess('已取消收藏',1000);

                    }
                }else {
                    dialog.tusiError(response.errorMsg);
                }
            }
        })
    }

    //支付弹窗
    function payMethod() {
        $('.mask').fadeIn();
        $('#pat-method').slideDown();
    }
    //分享弹窗
    function shaMethod() {
        $('.mask').fadeIn();
        $('#share-method').slideDown();
    }


    //当mask弹出之后，阻止底层向上滑动
    var mask = $('.mask');
    mask.bind('touchmove',function (event) {
        event.preventDefault();
    });
    $('#pat-method').bind('touchmove',function (event) {
        event.preventDefault();
    });
    $('#share-method').bind('touchmove',function (event) {
        event.preventDefault();
    });
    $('#pay-detail').bind('touchmove',function (event) {
        event.preventDefault();
    });
    //点击蒙版弹框的隐藏
    mask.bind('click',function () {
        mask.fadeOut();
        $('#share-method').slideUp();
        $('#pat-method').slideUp();
        $('#pay-detail').slideUp();
    });

    var method = null;


    $('#pay-submit').click(function () {
        method = $('input[name=radio1]:checked').val();
        $('#pat-method').slideUp();
        $('#pay-detail').slideDown();


    });
    $('#detail-submit').unbind().bind('click',function () {
        var inputSale = $('.actual-price').val();
        var redPacketSale = $('.hongbao-price').val();
        if (inputSale == ''){
            dialog.tusiError('输入的金额不能为空');
            return false;
        }
        if (redPacketSale == ''){
            redPacketSale = 0;
        }
        /**
         *支付。
         * 获取支付方式
         * @method 1为微信  2为支付宝
         * @redPacketSale  红包金额
         * @inputSale  输入的金额
         *
         * */
        goPay(inputSale,redPacketSale,method,'goBack',id,shopName,'1');
    });



    function goBack(back) {
        window.history.go(-1);
    }


    //分享
    $('.share-list').unbind().bind('click',share);

    /**
     *
     * 调用原生分享方法，
     * @method 1为微信好友，2为朋友圈，3为QQ好友。
     *
     * */
    function share() {
        var method = $(this).data('method');
        console.log(method);
        var data = {
            method:method
        };
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            iosShare(data);
        } else {
            androidShare(JSON.stringify(data));
        }
    }

    /**
     * 安卓拨打电话
     * */
    function androidCallPhone(data) {
        window.huifa.callPhone(data);
    }

    /**
     *
     * iOS 拨打电话*/

    function iosCallPhone(data) {
        window.webkit.messageHandlers.callPhone.postMessage(data);
    }

    /**
     * 安卓分享
     * */
    function androidShare(param) {
        window.huifa.pullShare(param);
    }

    /**
     * ios分享
     * */
    function iosShare(param) {
        window.webkit.messageHandlers.pullShare.postMessage(param);
    }
</script>


</body>
</html>